<!--
 * @Author: 白川 杏 baiyufeisteam@163.com
 * @Date: 2023-04-12 08:19:24
 * @LastEditors: 白川 杏 baiyufeisteam@163.com
 * @LastEditTime: 2023-06-12 15:31:57
 * @FilePath: \homeworkFinal\vueproject\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div id="app">
        <!-- <router-link to="/">login</router-link>
    <router-link to="/"></router-link>-->
        <!-- <router-view></router-view> -->
        <!-- 渲染内容 -->
    </div>
    <el-container class="layout-container-demo" style="height: 735px" v-if="token != null">
        <el-aside width="200px">
            <el-scrollbar>
                <h2 class="mb-2" style="font-size: 30px;">
                    <el-icon>
                        <Guide />
                    </el-icon>
                    Menu
                </h2>
                <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                    default-active="" router="true" text-color="#fff" @open="handleOpen" @close="handleClose">

                    <el-menu-item index="/user">
                        <el-icon>
                            <HomeFilled />
                        </el-icon>
                        <span>我的</span>
                    </el-menu-item>

                    <el-menu-item index="/userinfo">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>用户基本信息</span>
                    </el-menu-item>

                    <el-menu-item index="/order">
                        <el-icon>
                            <ShoppingCartFull />
                        </el-icon>
                        <span>用户订单</span>
                    </el-menu-item>

                    <el-menu-item index="/tipsofficial">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>官方百科</span>
                    </el-menu-item>
                    <el-menu-item index="/buy">
                        <el-icon>
                            <Goods />
                        </el-icon>
                        <span>商品列表</span>
                    </el-menu-item>
                    <el-menu-item index="/tags">
                        <el-icon>
                            <Grape />
                        </el-icon>
                        <span>植株详情</span>
                    </el-menu-item>

                    <el-menu-item index="/growtime">
                        <el-icon>
                            <Sunrise />
                        </el-icon>
                        <span>植物生长各阶段</span>
                    </el-menu-item>


                    <el-menu-item index="/growtip">
                        <el-icon>
                            <CollectionTag />
                        </el-icon>
                        <span>植株贴士</span>
                    </el-menu-item>

                    <el-menu-item index="/background">
                        <el-icon>
                            <PictureFilled />
                        </el-icon>
                        <span>虚拟作物背景图</span>
                    </el-menu-item>

                    <el-menu-item index="/plantswiper">
                        <el-icon>
                            <Picture />
                        </el-icon>
                        <span>植物百科轮播图</span>
                    </el-menu-item>

                    <el-menu-item index="/flowerpot">
                        <el-icon>
                            <Apple />
                        </el-icon>
                        <span>所有花盆</span>
                    </el-menu-item>

                    <el-menu-item index="/news">
                        <el-icon>
                            <ChatLineSquare />
                        </el-icon>
                        <span>论坛帖子</span>
                    </el-menu-item>

                    <el-menu-item index="/newscomment">
                        <el-icon>
                            <ChatLineSquare />
                        </el-icon>
                        <span>动态评论</span>
                    </el-menu-item>

                    <el-menu-item index="/goodscomment">
                        <el-icon>
                            <ChatLineSquare />
                        </el-icon>
                        <span>商品评论</span>
                    </el-menu-item>

                    <el-menu-item index="/recordlist">
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>生长记录</span>
                    </el-menu-item>

                    <el-menu-item index="/userreceive">
                        <el-icon>
                            <Van />
                        </el-icon>
                        <span>用户收货地址</span>
                    </el-menu-item>

                    <el-menu-item index="/userflowerpot">
                        <el-icon>
                            <Cherry />
                        </el-icon>
                        <span>用户的花盆</span>
                    </el-menu-item>

                    <el-menu-item index="/mycrops">
                        <el-icon>
                            <Pear />
                        </el-icon>
                        <span>用户作物</span>
                    </el-menu-item>

                    <el-menu-item index="/collect">
                        <el-icon>
                            <StarFilled />
                        </el-icon>
                        <span>用户收藏</span>
                    </el-menu-item>

                    <el-menu-item index="/sign">
                        <el-icon>
                            <Finished />
                        </el-icon>
                        <span>用户签到</span>
                    </el-menu-item>

                    <el-menu-item index="/coin">
                        <el-icon>
                            <InfoFilled />
                        </el-icon>
                        <span>硬币数据</span>
                    </el-menu-item>

                    <el-menu-item index="/admininfo">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>管理员</span>
                    </el-menu-item>
<!-- 
                    <el-menu-item index="/">
                        <el-icon>
                            <Tools />
                        </el-icon>
                        <span>退出登录</span>
                    </el-menu-item> -->
                    <!-- 
                    <el-menu-item index="/recordlistimg">
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>生长记录图片</span>
                    </el-menu-item>

                    <el-menu-item index="/buydesc">
                        <el-icon>
                            <Goods />
                        </el-icon>
                        <span>商品图片</span>
                    </el-menu-item>

                    <el-menu-item index="/commentimg">
                        <el-icon>
                            <Sell />
                        </el-icon>
                        <span>商品评论图片</span>
                    </el-menu-item>

                    <el-menu-item index="/newsimg">
                        <el-icon>
                            <ChatLineSquare />
                        </el-icon>
                        <span>帖子图片</span>
                    </el-menu-item> -->
                </el-menu>
            </el-scrollbar>
        </el-aside>

        <el-container>
            <el-main>
                <el-scrollbar>
                    <router-view></router-view>
                </el-scrollbar>
            </el-main>
        </el-container>
    </el-container>
    <router-view v-else />
</template>

<script>
import router from './router';
import axios from 'axios';

export default {
    name: 'App',
    data() {
        return {
            token: '',
            tests: false
        }
    },
    provide() {
        // 父组件中通过provide来提供变量，在子组件中通过inject来注入。
        return {
            getToken: this.getToken,
            test: this.test
        };
    },
    methods: {
        getToken() {
            this.token = localStorage.getItem("token")
        },
        test() {
            axios({
                method: 'post',
                url: 'http://localhost:8080/upload',
                withCredentials: true,
                data: { token: this.token }
            }).then(res => {
                if (res.data.msg == 'success') {
                    this.tests = true
                } else {
                    this.tests = false
                    alert("token无效，请重新登陆")
                    localStorage.removeItem("token");
                    localStorage.removeItem("username");
                    this.$router.push({
                        path: '/'
                    })
                    this.getToken()
                }
            })
        },
    },
    mounted() {
        this.getToken()
    }
};
</script>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    font-family: '华文中宋';
    /* margin-top: 60px; */
}
</style>

